<template>
  <div class="seamlessTable">
    <div class="tableHead">
      <span>任务编号</span>
      <span>起始地</span>
      <span>目的地</span>
      <span>车辆</span>
      <span>任务状态</span></div>
    <vue-seamless-scroll
      v-if="testArray[0]"
      :data="testArray"
      :class-option="optionHover"
      class="seamless-warp"
    >
      <ul>
        <li v-for="(item,index) in testArray" :key="index" class="liStyle">
          <span class="title">{{ item.num }}</span>
          <span class="title">{{ item.name }}</span>
          <span class="title">{{ item.car }}</span>
          <span class="title item-four">{{ item.age }}</span>
          <span class="title">{{ item.phone }}</span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testArray: [
        { num: 18384818, name: '刘明明', age: 14, phone: '15876512321', car: 8 },
        { num: 18384818, name: '王五五', age: 15, phone: '15876512321', car: 4 },
        { num: 18384818, name: '张萌萌', age: 23, phone: '15876512321', car: 6 },
        { num: 18384818, name: '刘浩', age: 20, phone: '15876512321', car: 5 },
        { num: 18384818, name: '刘佳', age: 21, phone: '15876512321', car: 10 },
        { num: 18384818, name: '王佳', age: 16, phone: '15876512321', car: 3 },
        { num: 18384818, name: '赵子龙', age: 19, phone: '15876512321', car: 2 },
        { num: 18384818, name: '杨幂', age: 35, phone: '15876512321', car: 15 }
      ]
    }
  },

  computed: {
    // 滚动表格的配置项

    optionHover() {
      return {
        // 是否开启鼠标悬停stop
        hoverStop: false,

        direction: 1,
        // 0向下 1向上 2向左 3向右
        step: 1,
        // 数值越大速度滚动越快
        openWatch: true
        // 开启数据实时监控刷新dom
        // limitMoveNum: 5, //开始滚动的数据量
        // singleHeight: 0,单步运动停止的高度(默认值0是无缝不停止的滚动)
        // direction => 0/1
        // singleWidth: 0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000
        // 单步运动停止的时间(默认值1000ms)
      }
    }
  }

}

</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  /*font-weight: normal;*/
}

ul {
  list-style: none;
}

table {
      width: 100%;
      text-align: center;
}

// th {
// 	height: 40px;
// 	line-height: 40px;
// 	font-size: 16px;
// 	background-color: rgba(180, 181, 198, 0.1);
// }
.seamlessTable{
    // border: 1px #fafafa;
    background-color: #fafafa;
    .tableHead{
        display: flex;
        justify-content: space-around;
        margin-top: 16px;
        background-color: #f9fafe;
        height: 40px;
        line-height: 40px;
    }
    .seamless-warp {
        height: 400px;
        overflow: hidden;
        .liStyle {
			height: 50px;
			line-height: 50px;
			width: 100%;
			display: flex;
            justify-content: space-around;
            text-align: center;
             margin-left: 10px;
            &:nth-child(2n){
                background-color: #fff;
            }
            .title {
                flex: 1;

            }
            .item-four{
                margin-right: 20px;
            }

        }

    }
}
</style>

